<template>
  <el-scrollbar v-if="show" class="maxSize">
    <el-form ref="formRef" :rules="formRules" :model="form">
      <el-form-item label="题目内容" prop="content">
        <el-input maxlength="255" show-word-limit :rows="3" type="textarea" v-model="form.content" placeholder="请输入题目内容" ></el-input>
      </el-form-item>

      <el-form-item label="题目类型" prop="type">
        <el-radio-group v-model="form.type" >
          <el-radio-button v-for="(item,index) in questionTypes" :key="index" :label="index">{{ item }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="题目答案" prop="answer">
        <!--不同的题型有不同的答案类型-->
        <!--选择题-->
        <ChoiceAnswer  @input="answerInput" v-if="form.type==0"
                      :count="4"></ChoiceAnswer>
        <!--多选题-->
        <ChoiceAnswer  @input="answerInput" v-if="form.type==1"
                      :count="4" checkbox
        ></ChoiceAnswer>
        <!--判断题-->
        <ChoiceAnswer  @input="answerInput" v-if="form.type==2"
                      :count="2" ture_or_false></ChoiceAnswer>
      </el-form-item>

      <el-form-item label="题目标签">
        <el-select filterable  multiple v-model="form.tags"  placeholder="请输入标签" allow-create>
          <el-option  v-for="item in allTag" :key="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <div style="display: flex;flex-direction: row;justify-content: center;width: 100%">
          <el-button style="width: 39%" type="primary" @click="btnAddQuestion(formRef)">添加</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-scrollbar>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {Question, QuestionAnswer, questionTypes, Tag, User} from "../../types/mytypes";
import {FormInstance, FormRules} from "element-plus";
import ChoiceAnswer from "./ChoiceAnswer.vue";
import {QuestionRequest, TagRequest} from "../../request/MyRequset";
import {UserStore} from "../../store/store";

const formRef = ref<FormInstance>()
const emit = defineEmits(["error", "success"]);
const form = reactive({
  content: '',
  type: 0,
  answerList: [] as QuestionAnswer[],
  inputText: '',
  tags:[] as string[]
})
let show = ref(false)
const user:User = UserStore.getUser()
//全部标签
let allTag = ref<Tag[]>([])

//====================FN====================

onMounted(async () => {
  allTag.value = (await TagRequest.getAll()).data
  show.value = true;
})

const formRules = reactive<FormRules>({
  content: [
    {type: "string", required: true, message: "不能为空"}
  ],
  type: [
    {type: "number", required: true, message: "不能为空"}
  ],
})
const btnAddQuestion = async (formEl: FormInstance | undefined) => {
  //console.log(form.tags)
  if (!formEl) return;
  await formEl.validate(async (valid) => {
    if (!valid) return;
    //创建题目对象
    let question: Question = {
      content: form.content,
      u_id:user.id,
      type: form.type
    }
    let tags:Tag[] = []
    for(let i in form.tags){
      tags.push({
        name:form.tags[i]
      })
    }
    //发送请求创建题目
    let addQuestionRes = await QuestionRequest.addWithAnswer(question, form.answerList, tags,user.id);
    if (addQuestionRes.suc) {
      success();
    } else {
      error(addQuestionRes.message);
    }
  })
}

const error = (error: string) => {
  emit("error", error);
}
const success = (msg?: string) => {
  emit("success", msg);
}
const answerInput = (val: string | QuestionAnswer[]) => {
  if (form.type > 2) {
    form.answerList[0] = {
      answer: val as string,
      isRight: true,
    };
  } else {
    form.answerList = val as QuestionAnswer[];
  }
}
</script>

<style scoped lang="scss">
.maxSize {
  max-width: 40em;
}
</style>